<template>
    <div id="app">
        <div id="search-box" class="overlay left-overlay">
            <!-- 查询栏 -->
        </div>
        <div id="disease-list" class="overlay right-overlay">
            <!-- 病害列表 -->
        </div>1
        <vue-amap :amap-key="amapKey" :center="center" :zoom="zoom" @init="onMapInit" class="map">2
            <vue-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position"></vue-amap-marker>
        </vue-amap>3
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import { VueAmap, VueAmapMarker } from 'vue-amap';

const amapKey = 'e0d285f291481d84082aaa49a43de5d2';
const center = { lng: 111.096439, lat: 36.411827 };
const zoom = 13;

const markers = ref([]);

function onMapInit({ AMap }) {
    console.log('onMapInit')
    generateRandomMarkers(AMap, 10);
}

function generateRandomMarkers(AMap, count) {
    // 在此处生成随机标记，并将其添加到地图上
}
</script>
  
<style scoped>
body,
#app {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #202124;
}

.map {
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    background-color: rgba(33, 33, 33, 0.8);
    color: white;
    padding: 16px;
    border-radius: 8px;
}

.left-overlay {
    top: 16px;
    left: 16px;
}

.right-overlay {
    top: 16px;
    right: 16px;
}
</style>
  